<template>
	<view :class="themeName">
		<view class="balance-transfer">
			<!-- 对方账户ID或者手机号码 -->
			<view class="contain bg-white">
				<input style="height: 100rpx" v-model="userSn" type="text" :placeholder="$zhTran('请输入对方会员ID/手机号码进行转账')" />
			</view>

			<!-- 转账输入金额 -->
			<view class="contain transfer-money bg-white m-t-20">
				<view class="muted xs">{{ $zhTran('转账金额') }}</view>
				<view class="input flex row-center">
					<view class="m-b-5" style="font-size: 23px; align-self: flex-end">{{ walletData.price_symbol }}</view>
					<input v-model="money" type="digit" placeholder="0.00" />
					<view class="column" style="flex: none">
						<view class="xs primary" style="text-align: right" @click="money = walletData.user_money">
							{{ $zhTran('全部') }}
						</view>
						<view class="xs m-t-10" style="color: #bbbbbb">{{ $zhTran('钱包余额') }} {{ walletData.price_symbol }}
							{{ walletData.user_money }}
						</view>
					</view>
				</view>
				<view class="btn lg white flex row-center br60" @click="transferBtn">{{ $zhTran('转账') }}</view>
				<navigator url="/bundle/pages/transfer_record/transfer_record" hover-class="none"
					class="m-t-20 nr lighter flex row-center">
					{{ $zhTran('转账记录') }}
				</navigator>
			</view>

			<!-- 最近转账数据 -->
			<view class="user contain bg-white m-t-20" v-if="transferList.length">
				<view class="lg bold">{{ $zhTran('最近转账') }}</view>
				<view class="list">
					<view class="item flex" v-for="(item, index) in transferList" :key="index" @click="userSn = item.sn">
						<u-image class="m-r-30" width="68rpx" height="68rpx" border-radius="50%"
							:src="item.avatar"></u-image>
						<view>
							<view class="md">{{ item.nickname }}</view>
							<view class="xs muted">{{ $zhTran('会员ID') }}:{{ item.sn }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 弹窗确认转账 -->
			<u-modal :value="showTransferInfo" show-cancel-button :title="$zhTran('确认转账给')" :confirm-color="themeColor"
				async-close :confirm-text="$zhTran('确认转账')" @confirm="showInputPwd" @cancel="showTransferInfo = false">
				<view class="slot-content flex row-center" style="padding: 40rpx 80rpx">
					<view class="transfer-user flex">
						<u-image class="m-r-30" width="68rpx" height="68rpx" border-radius="50%" :src="transferInfo.avatar">
						</u-image>
						<view>
							<view class="md">{{ transferInfo.nickname }}</view>
							<view class="xs muted mt10">{{ $zhTran('会员ID') }}:{{ transferInfo.sn }}</view>
						</view>
					</view>
				</view>
			</u-modal>

			<!-- 交易密码组件 -->
			<set-pay-pwd ref="setPayPwd" @confirm="transferFun"></set-pay-pwd>
		</view>
		<w-jishuzhichi />
	</view>
</template>

<script>
import {
	hasPayPassword,
	transfer,
	getTransferRecent,
	setPassword,
	userTransferInfo,
	apiWalletData,
} from "@/api/user";
export default {
	data() {
		return {
			showTransferInfo: false, //是否显示转账对方的用户信息
			pwd: "", //密码
			comfirmPwd: "", //确认密码
			userSn: "", //用户编号/手机号
			money: "", //转账的金额
			transferInfo: {}, //转账对方的用户信息
			transferList: [],
			walletData: {
				user_money: "0.00", //总资产
				total_recharge_amount: "0.00", //累计充值
				total_order_amount: "0.00", //累计消费
			},
		};
	},
	onLoad() {
		this.getTransferRecentFun(); //最近的转账会员记录
		this.apiWalletDataFun(); //获取钱包余额数据
		if (this.$Route.meta.atitle) {
			uni.setNavigationBarTitle({
				title: this.$zhTran(this.$Route.meta.atitle)
			})
		}
	},
	onShow() {
		setTimeout(() => {
			this.$refs.setPayPwd && this.$refs.setPayPwd.hasPayWord();
		});
	},
	methods: {
		// 获取钱包余额数据
		apiWalletDataFun() {
			apiWalletData().then((res) => {
				this.walletData = this.$zhTran(res);
			});
		},
		// 显示输入交易密码弹窗
		showInputPwd() {
			this.showTransferInfo = false;
			this.$refs.setPayPwd.showInputPwd();
		},
		// 最近的转账会员记录
		getTransferRecentFun() {
			getTransferRecent().then((res) => {
				this.transferList = this.$zhTran(res);
			});
		},
		// 获取对方账户信息
		transferBtn() {
			if (!this.userSn)
				return this.$toast({
					title: this.$zhTran("请输入对方会员ID/手机号码"),
				});
			if (!this.money)
				return this.$toast({
					title: this.$zhTran("请输入转账金额"),
				});
			// 校验会员信息
			userTransferInfo({
				transfer_in: this.userSn,
			}).then((res) => {
				this.transferInfo = this.$zhTran(res);
				this.showTransferInfo = true;
			});
		},
		// 确认转账
		transferFun(payPwd) {
			let data = {
				transfer_in: this.userSn,
				money: this.money,
				pay_password: payPwd,
			};
			transfer({
				...data
			}).then((res) => {
				this.$toast({
					title: this.$zhTran("转账成功"),
				});
				this.money = "";
				this.showInputPwd();
				this.apiWalletDataFun();
				this.getTransferRecentFun();
			});
		},
	},
};
</script>

<style lang="scss">
.balance-transfer {
	padding: 20rpx 30rpx;

	.contain {
		border-radius: 20rpx;
		padding: 0 24rpx;
	}

	.transfer-money {
		padding: 30rpx 45rpx;

		.input {
			border-bottom: $-solid-border;
			margin-top: 30rpx;

			input {
				width: 100%;
				height: 94rpx;
				text-align: left;
				font-size: 66rpx;
				margin-left: 30rpx;
			}
		}

		.btn {
			@include background_linear(180deg, 50%, 100%);
			line-height: 84rpx;
			margin-top: 80rpx;
		}
	}

	.user {
		padding: 22rpx 25rpx;

		.list .item {
			padding: 26rpx 0;

			&:not(:last-of-type) {
				border-bottom: $-solid-border;
			}
		}
	}
}

/* 弹窗 */
.balance-transfer .set-word input {
	border: var(--border);
	padding: 16rpx 20rpx;
	font-size: 28rpx;
	border-radius: 6rpx;
	margin-bottom: 20rpx;
}

.balance-transfer .phone {
	padding: 20rpx 0;
	font-size: 42rpx;
}
</style>